<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header> <h3>Contact form</h3> </header> <section id="contact"> <div class="main"> <div class="wrapper"> <form> <div class="field"> <input type="text" name="text" placeholder="Enter name"> </div> <div class="field"> <input type="Email" name="text" placeholder="Enter Email"> </div> <div class="field"> <input type="text" name="text" placeholder="Enter Subject"> </div> <div class="field"> <textarea placeholder="Summary"></textarea> </div> <div class="field"> <input type="radio" name=""> <label>Select 1</label> <input type="radio" name=""> <label>Select 2</label> <input type="radio" name=""> <label>Select 2</label> </div> <div class="field"> <input type="checkbox" name=""> <label>Select 1</label> <input type="checkbox" name=""> <label>Select 1</label> <input type="checkbox" name=""> <label>Select 1</label> </div> <div class="field"> <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> <div class="field"> <input type="button" name="submit" value="Submit"> </div> </form> </div> </div> </section> <section id="footer_link"> <a href="http://opensnippets.com" target="_blank">Bootstrap snippets</a> </section>

@import url('https://fonts.googleapis.com/css?family=Maven+Pro|Poiret+One'); body{ margin: 0; padding: 0; font-family: 'Poiret One', cursive; } header{ height: 60px; background-color: #5293BF; overflow: hidden; } h3{ color: #fff; text-align: center; } label{ font-size: 15px; font-family: 'Poiret One', cursive; font-weight: bold; letter-spacing: 0.09em; } #contact{ margin: 50px 0px; } #contact .wrapper{ width: 40%; margin: 0 auto; } #contact .field{ margin-bottom: 35px; } #contact input[type="text"],input[type="email"]{ width: 100%; height: 35px; border: none; border-bottom: 3px solid #5293BF; font-size: 15px; font-family: 'Poiret One', cursive; font-weight: bold; letter-spacing: 0.09em; } #contact input[type="text"]:focus, input[type="email"]:focus, textarea:focus, input[type="button"]:focus{ outline: none; } #contact input[type=radio], input[type=checkbox]{ border: 2px solid #5293BF; } #contact input[type=radio]:focus, input[type=checkbox]:focus{ border-color: #165A92; color: #165A92; } select,select option { width: 100%; height:45px; font-size: 15px; border-color: transparent; border: 2px solid #5293BF; font-family: 'Poiret One', cursive; font-weight: bold; } select:focus{ border: none; outline: 2px solid #5293BF; box-shadow: 0px 0px 3px 0px #5293BF; } select option { margin: 10px 0px; padding: 10px; } input[type="button"] { width: 100%; border: none; background-color: #5293BF; border: 2px solid #5293BF; color: #fff; font-size: 18px; padding: 8px 0px; cursor: pointer; font-family: 'Poiret One', cursive;font-weight: bold; } #contact textarea{ height: 150px; width: 100%; border: none; border-bottom: 3px solid #5293BF; font-size: 15px; font-family: 'Poiret One', cursive; font-weight: bold; letter-spacing: 0.09em; } @media only screen and (max-width: 900px){ #contact .wrapper{ width: 80%; margin: 0 auto; } } #footer_link{ text-align: center; margin: 50px 0px; } #footer_link a{ background: #5293BF; color: #fff; padding: 10px 20px; font-size: 20px; }